<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Current task:') + store.title()"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    @close="store.hide()"
  >
    <el-card>
      <!-- 任务标题和进度状态行 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="4">
          <label>{{ t('Current task:') }}</label>
        </el-col>
        <el-col :span="18">
          <label>{{ store.title() }}</label>
        </el-col>
        <el-col :span="2" style="text-align: right;">
          <label :style="{ color: store.progressColor }">
            {{ store.progressText }}
          </label>
        </el-col>
      </el-row>

      <!-- 进度条行 -->
      <el-row :gutter="8">
        <el-col :span="24">
          <el-progress 
            :percentage="store.progress"
            :show-text="false"
          />
        </el-col>
      </el-row>

      <!-- 描述和控制按钮行 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="18">
          <label>{{ store.description }}</label>
        </el-col>
        <el-col :span="4">
          <el-checkbox
            :model-value="store.checkDetails"
            @change="store.toggleCheckDetails()"
          >
            {{ t('Check details') }}
          </el-checkbox>
        </el-col>
        <el-col :span="2" style="text-align: right;">
          <el-button
            type="danger"
            link
            :disabled="!store.isCancellable"
            @click="store.cancelTask()"
          >
            {{ t('Cancel') }}
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script setup>
import { useTaskBannerStore } from '@/stores/taskBanner'
import { useLanguageStore } from '@/stores/language'

const store = useTaskBannerStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Current task:': {
      'en': 'Current task:',
      'zh': '当前任务：'
    },
    'Check details': {
      'en': 'Check details',
      'zh': '查看详情'
    },
    'Cancel': {
      'en': 'Cancel',
      'zh': '取消'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>
